import { createElement, render } from './element';

//  JSX --> createElement react
//  以前的前端使用真实DOM 现在内存中有虚拟DOM(Element )树
//  虚拟DOM树可以立马转变成真实DOM
let virtualDOM = createElement("ul", { class: "list" }, [
  createElement("li", { class: "item" }, ["周杰伦"]),
  createElement("li", { class: "item" }, ["林俊杰"]),
  createElement("li", { class: "item" }, ["王力宏"]),
])

// console.log(virtualDOM);
let el = render(virtualDOM);
document.getElementById('root').appendChild(el);

/*  
 在浏览器底层 有一个 js V8引擎  
 html css 是属于渲染层 
 渲染层和js逻辑之间需要不断切换进程
 VDOM两棵树都在内存中
 原来的状态树 MVVM之后 生成新的状态树
 新的树与旧的树比较 得到差异 一次性收集到了DOM需要修改的地方
 根据差异修改原来的DOM树则不需要切换进程 能高效地更新DOM树
*/


// VD(虚拟DOM树)的意义 可以比较
let virtualDOM2 = createElement('ul', { class: "list-group" }, [
  createElement('li', { class: 'item active' }, ['七里香']),
  createElement('li', { class: 'item' }, ['千年以后']),
  createElement('li', { class: 'item' }, ['需要人陪'])
])